<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select name="" id="">
        <option value="">请选择省份：</option>
    </select>
    <select name="" id="">
        <option value="">请选择市：</option>
    </select>
</body>
<script>
    var a
    a['河北'] = ['张家口','石家庄']
    a['河南'] = ['郑州','洛阳']
    
</script>
</html> -->


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>js省市二级联动</title>
</head>

<body>
    <form name="aform" method="get" action="#">
        省份：<select id="province" name="province" onchange="changeProvince(this.selectedIndex)"></select>
        城市：<select id="city" name="city"></select>
    </form>
</body>

</html>

<script type="text/javascript">
    var provinces = ["请选择省份", "北京市", "天津市", "上海市", "重庆市", "江苏省", "浙江省", "江西省", "海南省"];
    var citys = [
        ["请选择城市"],
        ["北京市"],
        ["天津市"],
        ["上海市"],
        ["重庆市"],
        ["南京市", "无锡市", "徐州市", "常州市", "苏州市", "南通市", "连云港市", "淮安市", "盐城市", "扬州市", "镇江市", "泰州市", "宿迁市"],
        ["杭州市", "宁波市", "温州市", "绍兴市", "湖州市", "嘉兴市", "金华市", "衢州市", "台州市", "丽水市", "舟山"],
        ["南昌市", "九江市", "上饶市", "抚州市", "宜春市", "吉安市", "赣州市", "景德镇", "萍乡市", "新余市", "鹰潭市"],
        ["海口市", "三亚市", "三沙市", "儋州市"]
    ];
    window.onload = function () {
        var province = document.getElementById("province");
        var city = document.getElementById("city");
        var index = 0;
        //创建好后加入到列表中
        for (var i in provinces) {
            var option = document.createElement("option");
            option.text = provinces[i];
            option.value = provinces[i];
            province.appendChild(option);
        }
        var option = document.createElement("option");
        option.text = citys[index];
        option.value = citys[index];
        city.appendChild(option);
    }

    function changeProvince(selectedIndex) {
        var city = document.getElementById("city");
        city.options.length = 0;
        for (var i in citys[selectedIndex]) {
            var option = document.createElement("option");
            option.text = citys[selectedIndex][i];
            option.value = citys[selectedIndex][i];
            city.appendChild(option);
        }

    }
</script>